<template>
  <a-layout>
    <nav-bar class="top-bar"></nav-bar>
    <a-layout-content class="main-container">
      <a-card title="个人资料" :bordered="false" class="config-card">
        <a-button slot="extra" shape="round" type="primary" @click="back">
          返回
        </a-button>
        <p>用户名：{{ username }}</p>
        <p>邮箱：{{ email }}</p>
      </a-card>
    </a-layout-content>
  </a-layout>
</template>

<script>
import NavBar from "./../../components/common/NavBar";
import api from "./../../common/api";

export default {
  data() {
    return {
      username: "123",
      email: "123@123.com",
    };
  },
  components: {
    NavBar,
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.$get(api.getUserInfo).then((res) => {
        if (res) {
          let user = res.data;
          this.username = user.login;
          this.email = user.email;
        }
      });
    },
    back() {
      this.$router.go(-1);  // 返回上一页
    },
  },
};
</script>

<style lang="less" scoped>
.top-bar {
  background-color: white;
}

.main-container {
  background-color: #f4f4f5;
  margin-top: 96px;
  padding: 36px 25% 0 25%;
  min-height: calc(100vh - 96px);
}
</style>
